<template>
  <view class="container p-bottom" v-if="order.order_id">
    <scroll-view :scroll-y="true">
      <!-- 收货地址 -->
      <view class="b-f">
        <view class="flow-checkout-header b-f dis-flex">
          <view class="flow-header-left padding-box">
            <view class="flow-checkout-admin f-30 f-30 col-3">
              {{ order.address.name }}
              <text class="f-28 col-m">{{ order.address.phone }}</text>
            </view>
            <view class="flow-checkout-address f-26">
              {{ order.address.region.province }} {{ order.address.region.city }} {{ order.address.region.region }}
              {{ order.address.detail }}
            </view>
          </view>
        </view>
      </view>

      <!-- 物流信息 -->
      <view class="flow-all-money b-f padding-box m-top20" v-if="order.delivery_status.value === 20">
        <view class="dis-flex flow-all-list">
          <text class="flex-five">物流信息</text>
        </view>
        <navigator class="dis-flex" hover-class="none" :url="'./express/express?order_id=' + order.order_id">
          <view class="flex-box">
            <view class="dis-flex flow-all-list-cont">
              <text class="col-7">物流公司：{{ order.delivery_info.company }}</text>
            </view>
            <view class="dis-flex flow-all-list-cont">
              <text class="col-7" :selectable="true">物流单号：{{ order.delivery_info.express_no }}</text>
            </view>
          </view>
          <view class="flow-arrow dis-flex">
            <text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
          </view>
        </navigator>
      </view>

      <!-- 商品列表 -->
      <view class="order-cont b-f m-top20">
        <view class="padding-box b-f">
          <view class="order-header dis-flex">
            <view class="flex-box dis-flex">
              <text class="title">商品列表</text>
            </view>
            <view class="flex-box flex-x-end dis-flex">
              <text class="col-m" >{{ order.order_status_desc }}</text>
<!--              <text class="col-m" v-if="order.pay_status.value === 10">{{ order.pay_status.text }}</text>
              <text class="col-m" v-if="order.pay_status.value === 20 && order.delivery_status.value === 10">
                {{ order.delivery_status.text }}
              </text>
              <text class="col-m"
                    v-if="order.pay_status.value === 20 && order.delivery_status.value === 20 && order.receipt_status.value === 10">
                {{ order.receipt_status.text }}
              </text>
              <text class="col-m" v-if="order.order_status.value === 30">{{ order.order_status.text }}</text>-->
            </view>
          </view>
        </view>
        <view class="padding-box b-f">
          <view class="order-cont dis-flex">
            <view class="order-num">
              <text :selectable="true">订单号：{{ order.order_no }}</text>
            </view>
            <view class="order-time">
              <text>{{ order.create_time }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="padding-box b-f">
        <view @tap="goodsDetail" class="dis-flex flow-shopList b-f" :data-id="item.item_id"
              v-for="(item, index) in order.goods" :key="index">
          <view class="flow-list-left">
            <image mode="scaleToFill" :src="item.image"></image>
          </view>

          <view class="flow-list-right">
            <text class="h4 twolist-hidden">{{ item.name }}</text>
            <text class="p f-22 col-7">{{ item.goods_attr }}</text>
            <view class="flow-list-cont">
              <text class="flow-cont">￥{{ item.goods_price }}</text>
              <text class="small">×{{ item.total_num }}</text>
              <view class="zhekou" v-if="order.user.level != null && item.goods.vip > 0">会员折扣价{{
                  item.total_price
                }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="select b-f">
        <view class="flow-num-box b-f">
          <text>共{{ order.goods.length }}件商品，合计:</text>
          <text class="flow-money">{{ order.total_price }}</text>
        </view>
      </view>

      <!-- 买家留言 -->
      <view class="flow-all-money b-f m-top20" v-if="order.buyer_remark.length">
        <view class="dis-flex flow-all-list">
          <text class="flex-five">买家留言</text>
        </view>
        <view class="dis-flex flow-all-list-cont" style="padding: 15rpx 0">
          <text class="col-7">{{ order.buyer_remark }}</text>
        </view>
      </view>

      <!-- 订单金额 -->
      <view class="flow-all-money b-f padding-box m-top20">
        <view class="dis-flex flow-all-list">
          <text class="flex-five">订单金额</text>
        </view>
        <view class="dis-flex flow-all-list-cont">
          <text class="flex-five col-7">商品金额：</text>
          <text class="flex-five col-m t-r">￥{{ order.total_price }}</text>
        </view>
        <view class="dis-flex flow-all-list-cont">
          <text class="flex-five col-7">优惠券抵扣：</text>
          <text class="flex-five col-m t-r">-￥{{ order.coupon_price }}</text>
        </view>
        <view class="dis-flex flow-all-list-cont">
          <text class="flex-five col-7">配送费用：</text>
          <text class="flex-five col-m t-r">+￥{{ order.express_price }}</text>
        </view>
        <view class="dis-flex flow-all-list-cont" v-if="order.update_price.value !== '0.00'">
          <text class="flex-five col-7">后台改价：</text>
          <text class="flex-five col-m t-r">{{ order.update_price.symbol }}￥{{ order.update_price.value }}</text>
        </view>
        <view class="dis-flex flow-all-list-cont">
          <text class="flex-five col-7">实付金额：</text>
          <text class="flex-five col-m t-r">￥{{ order.pay_price }}</text>
        </view>
        <view class="dis-flex flow-all-list-cont">
          <text class="flex-five col-7">支付方式：</text>
          <text class="flex-five col-m t-r">{{ order.pay_way_desc }}</text>
        </view>
      </view>
      <view v-if="order.pay_status.value === 10 && order.order_status.value === 10" class="pay-box">
        <view class="payment-methods">
          <radio-group @change="onPaymentMethodChange">
            <label v-for="method in paymentMethods" :key="method.value" class="radio-item">
              <span class="label-text">{{ method.name }}</span>
              <radio :checked="method.value === pay_way" :value="method.value" class="custom-radio"/>
            </label>
          </radio-group>
        </view>
        <view v-if="qrCodeUrl && pay_way==='transfer'" class="qr-code-container">
          <image @tap="previewImages" :src="qrCodeUrl" class="qr-code" mode="widthFix"/>
          <text class="qr-code-label">请使用微信扫码支付</text>
          <text class="qr-code-label">支付完成记得提交</text>
        </view>
      </view>
    </scroll-view>

    <view class="flow-fixed-footer b-f">
      <view class="dis-flex chackout-box" v-if="order.pay_status.value === 10 && order.order_status.value === 10">
        <view @tap="cancelOrder" class="flex-box chackout-left-detail t-c">取消订单</view>
        <view class="flex-box chackout-right-detail">
          <text @tap="payOrder" class="flow-btn" v-if="order.pay_status.value === 10  && order.order_status.value === 10">去付款</text>
        </view>
      </view>
      <view class="flow-btn h3" v-if="order.delivery_status.value === 20 && order.receipt_status.value === 10">
        <view @tap="receipt">确认收货</view>
      </view>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      qrCodeUrl: '', // 用于存储二维码的URL
      pay_way: 'wechat',
      paymentMethods: [
        {value: 'wechat', name: '微信支付'},
        //{ value: 'alipay', name: '支付宝' },
        {value: 'transfer', name: '转账支付'},
        // { value: 'pay_for_me', name: '代付' }
      ],
      order_id: null,
      order: {
        order_id: '',

        address: {
          phone: '',

          region: {
            province: '',
            city: '',
            region: ''
          },

          detail: ''
        },

        delivery_status: {
          value: 0,
          text: ''
        },

        delivery_info: {
          company: '',
          express_no: ''
        },

        pay_status: {
          value: 0,
          text: ''
        },

        receipt_status: {
          value: 0,
          text: ''
        },

        order_status: {
          value: 0,
          text: ''
        },

        order_no: '',
        create_time: '',
        goods: [],

        user: {
          level: ''
        },

        total_price: '',
        buyer_remark: [],
        coupon_price: '',
        express_price: '',

        update_price: {
          value: '',
          symbol: ''
        },

        pay_price: ''
      }
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad: function (options) {
    this.order_id = options.order_id;
    this.getOrderDetail(options.order_id);
  },
  methods: {
    onPaymentMethodChange(e) {
      this.pay_way = e.detail.value;
    },
    /**
     * 获取订单详情
     */
    getOrderDetail: function (order_id) {
      let that = this;
      app.globalData._get(
          'order/detail',
          {
            order_id
          },
          function (result) {
            if (result.data.order.qrCodeUrl){
                that.qrCodeUrl = result.data.order.qrCodeUrl;
            }
            that.setData(result.data);
          }
      );
    },

    /**
     * 浏览商品图片
     */
    previewImages: function (e) {
      let index = e.currentTarget.dataset.index;
      let imageUrls = [];
      imageUrls.push(this.qrCodeUrl);
      uni.previewImage({
        current: imageUrls[index],
        urls: imageUrls
      });
    },

    /**
     * 跳转到商品详情
     */
    goodsDetail: function (e) {
      let item_id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: '../goods/index?item_id=' + item_id
      });
    },

    /**
     * 取消订单
     */
    cancelOrder: function (e) {
      let that = this;
      let order_id = that.order_id;
      uni.showModal({
        title: '提示',
        content: '确认取消订单？',
        success: function (o) {
          if (o.confirm) {
            app.globalData._post_form(
                'order/cancel',
                {
                  order_id
                },
                function (result) {
                  uni.navigateBack();
                }
            );
          }
        }
      });
    },

    /**
     * 发起付款
     */
    payOrder: function (e) {
      let that = this;
      let order_id = that.order_id;

      // 显示loading
      uni.showLoading({
        title: '正在处理...'
      });
      app.globalData._post_form(
          'order/pay',
          {
            order_id: order_id,
            pay_way: that.pay_way
          },
          function (result) {
            if (result.code === -10) {
              app.globalData.showError(result.msg);
              return false;
            }

            if (that.pay_way==="wechat"){
              // 发起微信支付
              uni.requestPayment({
                timeStamp: result.data.timeStamp,
                nonceStr: result.data.nonceStr,
                package: 'prepay_id=' + result.data.prepay_id,
                signType: 'MD5',
                paySign: result.data.paySign,
                success: function (res) {
                  that.getOrderDetail(order_id);
                },
                fail: function () {
                  app.globalData.showError('订单未支付');
                }
              });
            }else if(that.pay_way==="transfer"){
              app.globalData.showSuccess('订单已提交，请等待管理员审核', function () {
                uni.redirectTo({
                  url: '../order/detail?order_id=' + order_id
                });
              },2000,'none')
            }


          },
          null,
          function () {
            uni.hideLoading();
          }
      );
    },

    /**
     * 确认收货
     */
    receipt: function (e) {
      let that = this;
      let order_id = that.order_id;
      uni.showModal({
        title: '提示',
        content: '确认收到商品？',
        success: function (o) {
          if (o.confirm) {
            app.globalData._post_form(
                'order/receipt',
                {
                  order_id
                },
                function (result) {
                  that.getOrderDetail(order_id);
                }
            );
          }
        }
      });
    }
  }
};
</script>
<style>
@import './detail.css';
</style>
